<!DOCTYPE HTML>
<html>
<head>
<script src="animation.js"></script>
<script>
	window.onload = function(){
		var anim = new Animation("myCanvas");
		var canvas = anim.getCanvas();
		var context = anim.getContext();
		
		var linearSpeed = 100;
		var box = {
			x: 0, 
			y: canvas.height / 2 - 25,
			width: 100,
			height: 50
		};
		
		anim.setStage(function(){
			var linearDistEachFrame = linearSpeed * this.getTimeInterval() / 1000;
			if (box.x < canvas.width - box.width){
				box.x +=  linearDistEachFrame;
			}
			else {
				anim.stop();
			}
			this.clear();
			
			context.beginPath();
			context.fillStyle = "blue";
			context.fillRect(box.x, box.y, box.width, box.height);
		});
		anim.start();
	};
</script>
</head>
<body>
	<canvas id="myCanvas" width="800" height="500" style="border:1px solid black;">
	</canvas>
</body>
</html>